<template>
	<view class="IndexContent">
		<view class="imgBox">
			<view class="img" @click="show = true">
				<image class="logo" :src="avatarUrl"></image>
				{{userName}}
			</view>
		</view>
		<u-line color="#e4e7ed" border-style="dotted"></u-line>
		<view class="toolbarBox">
			<view class="toolbar">
				<view class="item">
					胜<text class="numV">18</text>次
				</view>
				<view class="item">
					/
				</view>
				<view class="item">
					负<text class="numD">18</text>次
				</view>
				<view class="item">
					/
				</view>
				<view class="item">
					胜负比例<text class="numV">48.36%</text>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<view class="item">
				<u-button type="primary" @click="toPage('/pages/room/room')">创建记账</u-button>
			</view>
			<view class="item">
				<u-button type="primary" plain>加入记账</u-button>
			</view>
			<view class="item">
				<u-button type="warning" @click="toPage('/pages/history/history')">历史记账</u-button>
			</view>
		</view>
		
	<!-- 修改用户信息弹窗 -->
		<u-popup :show="show" mode="center" @close="closePopup" @open="openPopup" safeAreaInsetBottom="true" customStyle="width:500rpx;height:700rpx" round="10" overlayOpacity="0.8" closeable="true">
			<view class="in">
				<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar" class="img">
					<image  :src="avatarUrl" class="logo"></image>
				</button>
				<text>
					请输入用户昵称
				</text>
				<view class="inputBox">
					<u--input
						placeholder="请茶水总数额"
						border="surround"
						v-model="proRataNum"
						type="nickname"
						adjustPosition="true"
						@change="change"
					  >
					  </u--input>
				</view>
				<view class="btn">
					<u-button type="warning">确定</u-button>
				</view>
			</view>
		</u-popup>
		
	<!-- 登录窗口 -->
		<u-modal :show="isLogin" title="提示" content='检测到您暂未登录,是否立即登录？' @confirm="confirmLogin"></u-modal>
		
		<u-loading-page :loading="loading"></u-loading-page>
		
		<u-safe-bottom></u-safe-bottom>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				userName:'微信用户',
				avatarUrl:'/static/userurl.png',
				userInfo:uni.getStorageSync('userInfo'),
				loading:false,
				isLogin:false
			}
		},
		computed:{
		},
		onLoad() {
			if(!this.userInfo){
				this.isLogin = true
			}
		},
		methods: {
			openPopup(){},
			closePopup(){
				this.show = false
			},
			bindblur(e) {
				this.userName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.userName = e.detail.value; // 获取微信昵称
			},
			onChooseavatar(e) {
				let self = this;
				let {
					avatarUrl
				} = e.detail;
				this.avatarUrl = avatarUrl
			},
			//微信授权登录
			confirmLogin(){
				this.isLogin = false
				this.loading = true
				uni.login({
				  provider: 'weixin',
				  success: function(res) {
				    console.log(res.code); // 获取到用户登录凭证后，通过后台请求接口换取用户信息
				    uni.request({
				      url: 'https://xxx.com/weixin/login',
				      data: {
				        code: res.code
				      },
				      success: function(res) {
				        console.log(res.data); // 后台返回用户信息
				      }
				    });
				  }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.IndexContent{
		margin: 0;
		.imgBox{
			height: 500rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.img{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.logo{
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
				}
			}
		}
		.toolbarBox{
			height: 80rpx;
			line-height: 80rpx;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			// background-color: #8f8f94;
			.toolbar{
				width: 80%;
				margin: auto;
				display: flex;
				justify-content: space-between;
				.item{
					margin-left: 5rpx;
				}
			}
		}
		.btnBox{
			margin-top: 50rpx;
			display: flex;
			justify-content: space-around;
			.item{
				width: 30%;
			}
		}
		.in{
			width: 95%;
			margin: auto;
			.img{
				margin-top: 40rpx;
				border: none;
				background-color: transparent;
				
				.logo{
					width: 350rpx;
					height: 350rpx;
					border-radius: 50%;
					border: 1px solid black;
				}
			}
			.img::after{
				border:none;
			}
			.inputBox{
				width: 90%;
				margin: auto;
				margin-bottom: 20rpx;
			}
			.btn{
				width: 90%;
				margin: auto;
				margin-bottom: 20rpx;
			}
		}
		.numV{
			color: #fa3534;
		}
		.numD{
			color: #19be6b;
		}
	}

</style>
